import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import './order.css'
import {Pagination } from 'antd'

class Order extends Component {
  constructor(props) {
    super(props)
    this.state = {
      page: 1,
      pageSize: 5
    }
  }

  componentDidMount() {
    this.props.getOrder({
      page: this.state.page,
      pageSize: this.state.pageSize
    })
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  renderOrder() {
    let arr = []
    this.props.order.get('data').map(item => {
      arr.push (
        <div key={item.get('id')} style={{marginBottom: '20px'}}>
          <p style={{height: '30px', paddingLeft: '20px', lineHeight: '30px', backgroundColor: '#f0f0f0'}}>
            订单号：{item.get('outTradeNo')} 
            <span style={{marginLeft: '40px'}}> 支付方式： {item.get('tradeType') === 'Alipay' ? '支付宝': '微信'}</span>
            <span style={{marginLeft: '40px'}}>下单时间{item.get('tradeSuccessTime')}</span>
            <span style={{float: 'right', marginRight: '20px'}}>总价<span style={{color: 'red', fontWeight: 'bold'}}> {item.get('price')}</span></span>
          </p>
          <div>
            <table >
              <thead>
                <tr>
                  <td>课程名称</td>
                  <td>课程封面</td>
                  <td>课程老师</td>
                  <td>课程价格</td>
                </tr>
              </thead>
              <tbody>
                {this.renderList(item)}
              </tbody>
            </table>
          </div>
        </div>
      )
    })
    return arr
  }

  renderList(item) {
    let arr = []
    item.get('lessons').map(ls => {
      arr.push(<tr key={ls.get('lessonId')}>
        <td>
          {ls.get('lessonName')}
        </td>
        <td>
          <img style={{width: '60px', height: 'auto'}} src={ls.get('coverUrl')} />
        </td>
        <td>
          {ls.get('teacherName')}
        </td>
        <td>
          {ls.get('lessonPrice')}
        </td>
      </tr>)
    })
    return arr
  }

  render() {
    return <div>
      {
          this.props.order.get('data') && this.props.order.get('data').size > 0 ? this.renderOrder() : <div style={{textAlign: "center", fontSize: '14px'}}>
          当前没有已完成支付订单
        </div>
      }
      <div style={{textAlign: 'right'}}>
      <Pagination current={this.state.page} total={this.props.order.get('total')} />
      </div>
    </div>
  }
}

const mapState = (state) => ({
  order: state.getIn(['person', 'order'])
})

const mapDispatch = (dispatch) => ({
  getOrder(params) {
    dispatch(actionCreators.getOrder(params))
  }
})


export default connect(mapState, mapDispatch)(Order)